<template>
	<view>
		<uvsticky offset-top="0">
			<view class="top-tab-list">
				<view class="tab-list-items" @click="gettab(item)" :class="{'sel-item':item.id==tanIndex}" v-for="item in tabLists" :key="item.id">
					{{item.text}}
					<view class="cut-img" v-if="tanIndex==item.id"></view>
				</view>
			</view>
		</uvsticky>
		<view class="movie-main" v-if="tanIndex==1">
			<view class="movie-list" v-for="(item,index) in hotMovie" :key="index" @click="getUrl(item)">
				<image :src="item.pic" class="movie-img"></image>
				<view class="move">
					<view class="mo-info-top"> {{item.filmName}} </view>
					<view class="hydy">
						<view>
							<view class="rate-item">评分：{{item.score}}</view>
							<view class="rate-item">导演：{{item.director}}</view>
							<view class="rate-item">主演：{{item.cast}}</view>
							<view class="calss-item"> <text class="classify-item">{{item.duration}}分钟</text> </view>
						</view>
						<view class="movie-btns">购票</view>
					</view>
				</view>
			</view>
		</view>
		<view class="centcss" v-if="tanIndex==2">
			<view class="yycss" v-for="item in yyList" :key="item.cinemaId" @click="go(item)">
				<view class="dyname">
					<text>{{item.cinemaName}}</text>
					<text>{{item.formattedDistance}}</text>
				</view>
				<view class="txt">{{item.address}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiGetmovie , apiDress } from '@/api/upapi.js';
	import { calculateDistance } from '@/utils/distance.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';

	const tabLists = ref([{text:'热映',id:1},{text:'影院',id:2}]);
	const tanIndex = ref(1);
	const pages = ref(1);
	const isNext = ref(false);
	const pages1 =ref(1);
	const isNext1 = ref(false);
	const hotMovie = ref([]);
	const yyList = ref([]);
	const lat = ref('');
	const lng = ref('');

	// 获取热门影片
	const getMovie = async() => {
		try {
			let res = await apiGetmovie({
				page: pages.value,
				pageSize:10
			});
			if(res.data.result==0){
				var data = res.data.object.data
				if (pages.value == 1) {
					hotMovie.value = data
				} else {
					hotMovie.value = hotMovie.value.concat(data);
				}
				if (data.length >= 10) {
					pages.value = pages.value + 1;
				} else {
					isNext.value = true
				}
			} else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getLocadin = () => {
		uni.getLocation({
			type: 'wgs84',
			success(res) {
				lat.value = res.latitude;
				lng.value = res.longitude;
				console.log('res===',res);
				getDress();
			},
			fail(error) {
				console.log('error===',error);
			}
		});
	};
	const getDress =async()=>{
		const ctiyid = uni.getStorageSync('cityIds');
		try {
			let res = await apiDress({
				cityId: ctiyid,
				page:pages1.value,
				pageSize:16
			});
			if(res.data.result==0){
				const data=res.data.object.map(cinema => ({
				    ...cinema,
				    distance: calculateDistance(
				      lat.value,
				      lng.value,
				      parseFloat(cinema.latitude),
				      parseFloat(cinema.longitude)
				    )
				})).sort((a, b) => a.distance - b.distance);
				const formattedData = data.map(cinema => ({
				    ...cinema,
				    formattedDistance: formatDistance(cinema.distance)
				}));
				// yyList.value=formattedData
				if (pages1.value == 1) {
				    yyList.value = formattedData;
				} else {
				    yyList.value = yyList.value.concat(formattedData);
				}
				if (formattedData.length >= 10) {
				    pages1.value += 1;
				} else {
				    isNext1.value = true;
				}
			}else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const formatDistance = (meters) => {
		const kilometers = meters / 1000;
		return `${kilometers.toFixed(1)}km`;
	};
	const getUrl =(e)=>{ uni.navigateTo({ url: '/pagesA/movie/cinema?title='+e.filmName+'&id='+e.filmId }) };
	const go=(e)=>{ uni.navigateTo({ url:'/pagesA/movie/moveinfo?data=' + encodeURIComponent(JSON.stringify(e)) }) };
	const gettab=(e)=>{ 
		if(tanIndex.value!=e.id){ tanIndex.value=e.id }
		if(e.id==1){ getMovie(); }else if(e.id==2){getLocadin();}
	};

	onLoad(() => {
		getMovie();
	});
	onReachBottom(() => {
		if (!isNext.value) { getMovie(); }
		if (!isNext1.value) { getDress(); }
	});
</script>

<style lang="scss" scoped>
	.top-tab-list {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		justify-content: space-around;
		
		.tab-list-items {
			color: #636775;
			font-size: 28rpx;
			width: 50%;
			text-align: center;
			position: relative;
		}
		.sel-item {
			color: #2D3039 !important;
			font-size: 32rpx !important;
			font-weight: 600;
		}
		.cut-img {
			width: 52rpx;
			height: 8rpx;
			position: absolute;
			bottom: -16rpx;
			border-radius: 20rpx;
			right: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #ff4a82;
		}
	}
	.movie-main {
		padding: 30rpx;
	
		.movie-list {
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
	
			.movie-img {
				width: 180rpx;
				height: 250rpx;
				border-radius: 20rpx;
			}
			.move{
				margin-left: 20rpx;
				height: 250rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				flex: 1;
				.mo-info-top {
					color: #2D3039;
					font-size: 28rpx;
					font-weight: 600;
					width: 100%;
					overflow: hidden;
					text-align: justify;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}
				.hydy{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					.rate-item {
						color: #787A82;
						font-size: 24rpx;
						width: 300rpx;
						margin-top: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					.calss-item {
						display: flex;
						margin-top: 10rpx;
					
						.classify-item {
							padding: 6rpx 12rpx;
							border-radius: 6rpx;
							border: 2rpx solid #DADCE4;
							color: #A6A8AE;
							font-size: 20rpx;
						}
					}
					.movie-btns {
						margin-left: auto;
						width: 110rpx;
						height: 58rpx;
						background: linear-gradient(207deg,#ffe6ec 0%, #ff4a82 100%);
						border-radius: 29rpx;
						text-align: center;
						line-height: 58rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 550;
					}
				}
			}
		}
	}
	.centcss {
		padding: 22rpx;
		
		.yycss {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		
			.dyname {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				>text:first-child {
					font-size: 28rpx;
					font-weight: 600;
					width: 80%;
					white-space: nowrap;
					/* 禁止换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: ellipsis;
					/* 显示省略号 */
				}
		
				>text:last-child {
					font-size: 26rpx;
				}
			}
		
			.txt {
				font-size: 22rpx;
				text-align: justify;
				text-justify: inter-ideograph;
				line-height: 1.3;
				margin-top: 10rpx;
				color: #7d7d7d;
			}
		}
	}
</style>